<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="elementui/vue.js"></script>
    <script src="elementui/index.js"></script>
    <link rel="stylesheet" href="elementui/index.css">
</head>
<body>
    <div id="app">
        <!--
        el-table 表格组件 :data数据绑定
        el-table-column prop属性 必须要跟返回的key保持一致
        -->
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期xxx"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件
        current-page:默认第几页
        page-sizes:每页显示多少条数据列表
        page-size:默认当前页显示的条数
        total:总条数

        使用分页组件：（自动分页）
        后台返回的数据：
           总记录数
           当前页码需要显示的数据
        -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="20"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <script>
        new Vue({
            el:"#app", //div id=app的区域受vue管理
            data() {
                return {
                    total:200,
                    currentPage4: 1,
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎1',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎2',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎3',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎4',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }]
                }
            },
            methods:{
                handleClick(row) {
                    console.log(row.name);
                },
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                }
            }
        })
    </script>
</body>
</html>